<template>
  <div>
    <el-table
      :data="tableData"
      size="small"
      border
      @selection-change="handleSelectionChange"
    >
    <el-table-column
        v-if="isShowSelection"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :align="item.align || 'center'"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.showOverflowTooltip || true"
      >
        <template slot-scope="scope">
        <!-- 若在具名插槽，根据传入的slot属性定位列元素，scope.row赋值 -->
          <slot 
            v-if="item.slot" 
            :name="item.slot" 
            :row="scope.row" 
            :column="item"
            :index="scope.$index"
          ></slot>
          <!-- 若不存在具名插槽，正常渲染列内容 -->
          <div v-else>
            <!-- 处理特定列的点击跳转逻辑 -->
            <!-- <a v-if="item.prop === 'riskNum'" @click="pageToDetail(scope.row)">
              {{ scope.row[item.prop] }}
            </a> -->
            <span>
              {{ scope.row[item.prop] }}
            </span>
          </div>
        </template>

      </el-table-column>

      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    columns: { // 表格列配置
      type: Array,
      default: () => []
    },
    tableData: { // 表格数据
      type: Array,
      default: () => []
    },
    isShowSelection: { // 是否显示选择框
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
       
    } 
  },
  methods: {
    // 处理选择框变化事件
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val);
    } 
  }
}
</script>

<style lang="scss" scoped>

</style>
